<template>
  <demo-content :title="title">
    <p>
      <code>strokeRect()</code> 和 <code>fillRect()</code> 两个方法是 Canvas
      绘图环境中仅有的两个可以立即绘制图形的方法(<code>strokeText()</code> 和
      <code>fillText()</code> 方法也是立即绘制的，但文本不算图形)。
    </p>
    <p>
      绘图环境对象中还有一些方法，用于绘制诸如贝塞尔曲线(bezier
      curve)这样岗位复杂的图形，这些方法都是基于路径(path)的。
    </p>
    <p>
      大多数绘制系统，例如 Scalable Vector
      Graphic(可缩放向量图形，简称SVG)、Apple 的 Cocoa 框架以及 Adobe
      Illustrator等，都是基于路径的。使用这些绘制系统时，你需要先定义一个路径，
      然后再对其进行描边(也就是绘制路径的轮廓线)或填充。也可以在描边的同时进行填充。
    </p>
    <p>
      rect() 与 arc()
      这样的方法来创建路径就好比使用隐形墨水来进行绘制一样，这些方法会创建一条不可见的路径，稍后调用
      stroke() 或 fill() 令其可见。
    </p>
    <canvas ref="canvasRef" width="800" height="600"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { BaseDrawInfo, arc, rect, text } from "./utils";

const title = "路径、描边与填充";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  ctx.lineWidth = 2;
  const ss = { strokeStyle: "green" };
  const fs = { fillStyle: "pink" };
  const items: [
    number,
    Partial<Pick<BaseDrawInfo, "fillStyle" | "strokeStyle">>
  ][] = [
    [30, ss],
    [270, fs],
    [500, { ...ss, ...fs }],
  ];
  for (const [x, style] of items) {
    let content = "";
    if (style.fillStyle && style.strokeStyle) content = "stroke&Fill";
    else if (style.fillStyle) content = "Fill";
    else if (style.strokeStyle) content = "Stroke";
    text.draw(ctx, {
      x,
      y: 60,
      text: content,
      fontSize: 50,
      ...style,
    });
    rect.draw(ctx, { x: x + 10, y: 130, w: 130, h: 80, ...style });
    arc.draw(ctx, {
      x: x + 70,
      y: 330,
      radius: 50,
      endAngle: Math.PI * 1.5,
      ...style,
    });
    arc.draw(ctx, {
      x: x + 70,
      y: 500,
      radius: 50,
      endAngle: Math.PI * 1.5,
      close: true,
      ...style,
    });
  }
});
</script>

<style src="./default.css" scoped></style>
